<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>懒加载</title>
    <style>
        html,body {
            margin: 0;
            padding: 0;
        }
        .list {
            width: 550px;
        }
        img {
            width: 100%;
            height: 300px;
            margin: 0;
        }
    </style>
</head>
<body>
<!-- 参考：https://blog.csdn.net/w1418899532/article/details/90515969 -->
<!-- 
    懒加载原理：
        当图片过多时，有一个长列表，只加载可视区域的图片，等滚动到下方区域时，才加载下方内容。

    方案：
        1. 将 img 的 src 放一张几kb的占位图，data-src 属性放真实图片，当图片赋给 src 属性时才会发起请求。
        2. 监听滚动条事件，当 offsetTop（元素距顶部距离）<= scrollY（滚动高度）+ clientHeight（可视区高度），将 data-src 赋值给 src。
-->

    <div class="list">
        <img src="../images/loading.gif" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2F2017-12-29%2F5a461006e85fe.jpg%3Fdown&refer=http%3A%2F%2Fpic1.win4000.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636600629&t=d812f026dea6517c0e5bf698e229300f" alt="">
        <img src="../images/loading.gif" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic38.nipic.com%2F20140226%2F18049074_195317304156_2.jpg&refer=http%3A%2F%2Fpic38.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636597548&t=c4126f8a7cb7469184b3fb4f56680854" alt="">
        <img src="../images/loading.gif" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fitbbs%2F1308%2F16%2Fc8%2F24543062_1376637153786.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636597548&t=1c53da78ed31e51d1cd51c39bda97ccb" alt="">
        <img src="../images/loading.gif" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic15.nipic.com%2F20110708%2F3388327_164155701127_2.jpg&refer=http%3A%2F%2Fpic15.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636597548&t=8d555f3a82e757897110df22bb80cdd7" alt="">
        <img src="../images/loading.gif" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic14.nipic.com%2F20110527%2F7539498_003034652127_2.jpg&refer=http%3A%2F%2Fpic14.nipic.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636597548&t=86ed658c92e85c8ae398b5aa75cdd659" alt="">
        <img src="../images/loading.gif" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwx1.sinaimg.cn%2Forj480%2F005RfIqdly1guokyvwq0aj60zk0k0gm802.jpg&refer=http%3A%2F%2Fwx1.sinaimg.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636597548&t=d508799ead9c6c2aca8bb6c5b3ad9aaa" alt="">
        <img src="../images/loading.gif" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fdpic.tiankong.com%2Fgk%2Fjs%2FQJ7116715583.jpg&refer=http%3A%2F%2Fdpic.tiankong.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636597729&t=2d4f12ddeccdca27ca22c958204b631f" alt="">
        <img src="../images/loading.gif" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.qunarzz.com%2Ftravel%2Fd8%2F1801%2Ff1%2Fe87c4e21022172b5.jpg_r_720x480x95_931f25be.jpg&refer=http%3A%2F%2Fimg1.qunarzz.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636597866&t=612f5f28b2949c55588aeb75f56c482b" alt="">
        <img src="../images/loading.gif" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F808da7c0b47b8fb5bf337ca40402ac09b832bdb6d804-fkH0Gl_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636597866&t=a83d3fb6501299ad26a5d666ce106f70" alt="">
        <img src="../images/loading.gif" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg1.qunarzz.com%2Ftravel%2Fd4%2F1602%2Fa3%2Fe40e6344684469f7.jpg_r_720x480x95_f34ee6d8.jpg&refer=http%3A%2F%2Fimg1.qunarzz.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1636597890&t=b5e748eab3e4c6c0e837371e6602a94b" alt="">
    </div>
</body>
<script>
    // 纯手写

    let imgEleList = document.getElementsByTagName('img')
    let length = imgEleList.length
    let clientHeight = document.documentElement.clientHeight
    let prevScrollY = scrollY
    let loadedNum = 0
    function lazyLoad(){
        console.log('load', document.body.scrollTop, scrollY, prevScrollY)
        if(scrollY >= prevScrollY) {
            prevScrollY = scrollY
            let height = window.scrollY + clientHeight
            console.log(window.scrollY, clientHeight, height)
            for(let i = loadedNum; i < length; i++){
                console.log(`imgEleList[${i}].offsetTop`,imgEleList[i],imgEleList[i].offsetTop, loadedNum,imgEleList[i].getAttribute('data-src'))
                if(imgEleList[i].offsetTop <= height){
                    imgEleList[i].src = imgEleList[i].getAttribute('data-src')
                    loadedNum ++
                } else { break }
            }
        }

    }
    lazyLoad()
    let timeId
    window.addEventListener('scroll', function(){
        clearTimeout(timeId)
        timeId = setTimeout(()=>{
            lazyLoad()
        }, 200)
    })

</script>
</html>